<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-select
        v-model="listQuery.status"
        filterable
        placeholder="审核类型"
        style="width:100px"
      >
        <el-option label="未审核" :value="0" />
        <el-option label="已审核" :value="1" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 350px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          align="center"
          label="用户ID"
          prop="userId"
        >

          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.userId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="昵称" prop="nickname">

        </el-table-column>
        <el-table-column align="center" label="性别" prop="gender">
          <template slot-scope="{row}">{{ row.gender|gender }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="认证类型"
        >
          <template slot-scope="{row}">
            <span v-if="row.goddessCertification">主播认证</span>
            <span v-else-if="row.liveCertification">真人认证</span>
            <span v-else>未认证</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="搭讪文案" prop="text">

        </el-table-column>
        <el-table-column align="center" label="搭讪图片" prop="text">
          <template slot-scope="{row}">
            <image-tooltip v-if="row.imageVo" :image-id="row.imageVo.url">
              <img
                slot="img"
                :src="row.imageVo.url"
                width="100px"
                @click="zoomImage(row.imageVo.url)"
              >
            </image-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态" prop="status">
          <template slot-scope="{row}">
            <span>{{ row.status | checkStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="提审时间" prop="createAt">
          <template slot-scope="{row}">
            {{ row.createAt | parseTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="账户状态" prop="nickname">
          <template slot-scope="{row}">
            <span>{{ row.banedStatus ? 1 : 0 | forbidState }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="160"
        >
          <template slot-scope="{row}">
            <el-button
              type="danger"
              size="mini"
              @click="onDeleteRow(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <ImageViewer
      :visible.sync="showImage"
      :url="imageUrl"
    />
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'
  import ImageViewer from '@/components/ImageViewer'
  import { xhrLiverAccostText, xhrDeleteAccostText } from '@/api/anchor'
  export default {
    name: 'AccostList',
    components: { TablePagination, ImageViewer },
    props: {
      userId: {
        type: Number,
        default: null
      }
    },
    filters: {
      checkStatus(val) {
        const obj = {
          0: '待审核',
          1: '通过',
          2: "拒绝"
        }
        return obj[val] ? obj[val] : ''
      },
      forbidState(val) {
        const obj = {
          0: '正常',
          1: '已封号',
          2: '禁聊'
        }
        return obj[val]
      }
    },
    data() {
      return {
        list: [],
        total: 0,
        listLoading:true,
        listQuery: {
          userId: this.userId,
          status: null,
          page: 1,
          limit: 20,
        },
        showImage: false,
        imageUrl: '',
        daterangeValue: '',
      }
    },
    created() {
      this.doSearch()
    },
    methods: {
      doSearch() {
        xhrLiverAccostText(this.listQuery)
          .then(resp => {
            this.list = resp.data.list
            this.total = resp.data.total
            this.listLoading = false
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      },
      zoomImage(url) {
        this.showImage = true
        this.imageUrl = url
      },
      onDeleteRow(row){
        xhrDeleteAccostText({accostTextId: row.id}).then(resp => {
          this.$message.success("操作成功")
          this.doSearch()
        }).catch(resp => {
          this.$message.success("操作成功")
          console.log(resp)
        })
      }
    }
  }
</script>
